<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-select v-model="selectActivityStatusValue" placeholder="请选择">
        <el-option
          v-for="item in optionsSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>

      </el-select>
      <el-input
        placeholder="请输入活动名称"
        v-model="activityName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getPageList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="活动名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubName"
        label="举办社团"
        width="200">
      </el-table-column>
      <el-table-column
        prop="activityDetail"
        label="活动详情"
        width="250">
      </el-table-column>
      <el-table-column
        prop="activityIntroduce"
        label="活动简介"
        width="250">
      </el-table-column>
      <el-table-column
        prop="wechat"
        label="联系方式"
        width="350">
      </el-table-column>
      <el-table-column
        prop="object"
        label="面向对象"
        width="350">
      </el-table-column>
      <el-table-column
        prop="maxPerson"
        label="最大人数"
        width="200">
      </el-table-column>
      <el-table-column
        label="开始时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.beginTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结束时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="申请时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动状态"
        width="150">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.activityStatus==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.activityStatus==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.activityStatus==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==3">禁用中</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==4">活动过期</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.activityStatus==5">活动进行中</el-tag>
          </div>
        </template>
      </el-table-column>
<!--      操作ui-->
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        label="操作"-->
<!--        width="250">-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash;          <el-button @click="handleClick(scope.row.createUserId)" type="text" size="small">查看创建人</el-button>&ndash;&gt;-->
<!--          <el-button type="text" size="small" @click="selectActivity(scope.row)">取消</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeActivityList"
      :page-count="page.pages"
    >
    </el-pagination>
<!--    审核状态选择-->
<!--    <el-dialog-->
<!--      title="提示"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="30%"-->
<!--      :before-close="handleClose">-->
<!--      <el-select v-model="activityStatusValue" placeholder="请选择">-->
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="updateActivity">确 定</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import {getPageActivity,auditActivity} from '../../../api/activity.js'
import {getDateTime1} from "../../../utils/dateTimeUtil";
import {auditClub} from "../../../api/club";
export default {
  name: "ActivityAudit",
  data(){
    return{
      page: {
        current: 1,
      },
      options: [{
        value: 0,
        label: '待审核'
      }, {
        value: 1,
        label: '审核通过'
      }, {
        value: 2,
        label: '不通过'
      }, {
        value: 3,
        label: '禁用'
      }],
      optionsSelect: [{
        value: -1,
        label: '全部'
      }, {
        value: 0,
        label: '待审核'
      },{
        value: 1,
        label: '审核通过'
      }, {
        value: 2,
        label: '不通过'
      }, {
        value: 3,
        label: '禁用'
      },{
        value: 4,
        label: '活动进行中'
      },{
        value: 5,
        label: '活动结束'
      }],
      selectActivityStatusValue: -1,
      activityStatusValue: 0,
      activityName: null,
      dialogVisible: false,
      selectedActivity: null,
    }
  },
  created() {
    this.getPageList();
  },
  methods: {
    getPageList() {
      getPageActivity({
        status: this.selectActivityStatusValue,
        currentPage: this.page.current,
        activityName: this.activityName,
      }).then(res=>{
        this.page = res.data;
      })
    },
    changeActivityList(val) {
      console.log(val)
      this.page.current = val;
      this.getPageList();
    },
    getDateTime(val) {
      return getDateTime1(val);
    },
    selectActivity(val){
      this.selectedActivity = val;
      this.dialogVisible = true;
      this.activityStatusValue = val.activityStatus;
    },
    updateActivity(){
      this.dialogVisible = false;
      let temp = new Object();
      temp.id = this.selectedActivity.id;
      temp.activityStatus = this.activityStatusValue;
      auditActivity(temp).then(res=>{
        this.getPageList();
      })
    }
  }
}
</script>

<style scoped>

</style>
